<template>
  <div style="width:100%;height:430px;">
    <el-row style="padding-top:20px;height:100%;">
      <el-col :span="6" class="colImg">
        <img src="../../assets/images/zaixian.png" alt="">
      </el-col>
      <el-col :span="18" style="padding-right:20px;">
        <div class="formDiv">
          <el-form ref="form" :model="form1" label-width="120px" >
            <el-row>
              <el-col :span="12">
                <el-form-item label="单位">
                  <el-input v-model="form1.DeptId" placeholder="请输入单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门">
                  <el-input v-model="form1.DeptName" placeholder="请输入部门"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="单位ID">
                  <el-input v-model="form1.UnitID" class="inp" placeholder="输入单位编码或点击随机生成" disabled></el-input>
                  <el-button type="primary" icon="el-icon-share" @click.native="generate"></el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="责任人">
                  <el-input v-model="form1.EmpName" placeholder="请输入责任人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密级">
                  <el-select v-model="form1.SecLvl" placeholder="请选择密级">
                    <el-option label="非密" :value=1></el-option>
                    <el-option label="秘密" :value=2></el-option>
                    <el-option label="机密" :value=3></el-option>
                    <el-option label="绝密" :value=4></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="资产编号">
                  <el-input v-model="form1.AssetNo" placeholder="请输入资产编号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备类型">
                  <el-select v-model="form1.Machine" placeholder="请选择设备类型">
                    <el-option label="专用机" value="01"></el-option>
                    <el-option label="windows" value="02"></el-option>
                    <el-option label="虚拟化服务器" value="03"></el-option>
                    <el-option label="非专用机的过程系统/Linux" value="04"></el-option>
                    <el-option label="安可通用机（桌面）" value="05"></el-option>
                    <el-option label="安可通用机（服务器）" value="06"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="地区">
                  <el-cascader v-model="form1.AddressInfo" :options="options"
                    :props="{ expandTrigger: 'hover',value: 'label'}" @change="handleChange" class="inp1"
                    placeholder="请选择地区">
                  </el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="deploy-btn">
          <el-button type="primary" @click.native="pre">上一步</el-button>
          <el-button type="primary" @click.native="next">下一步</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { cityData } from "../../assets/js/address";
export default {
  props: {
    lineType: {
      type: String,
    },
  },
  data() {
    return {
      form: {},
      form1: {
        DeptID:'',
        DeptName:'',
        UnitID:'',
        EmpName:'',
        SecLvl:1,
        Machine:'',
        AssetNo:'',
        AddressInfo:'',
        HostType:'1',//0-网络版在线注册 1-单机版 2-网络版离线注册
        EmpID:'1',
        UnitName:'23',
        licenseModel:'',// //授权方式，单机版用，license-软授权，ukey 授权
      },
      nextShow: true,
      show: "1",
      options: cityData,
    };
  },
  created() {
    console.log(cityData);
    // this.obtainSystemParam()
    this.generate()
  },
  methods: {
    handleChange(e) {
      this.form1.AddressInfo = e.join('-')
    },
    generate(randomFlag = false, min = 32, max = 32) {
      this.form1.UnitID= ''
      var s = [];
      var hexDigits = "0123456789abcdefghijklmn";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      this.form1.UnitID = uuid;
      // this.infoForm.task_id=str
    },

    next() {
      let params = {};
      this.form1.licenseModel=this.lineType
      for (let item in this.form1) {
        if (this.form1[item]) {
          params[item] = this.form1[item];
        }
      }
      this.$postForJson("vgmp/config/register", {data:params}).then((res) => {
        let { result, tip } = res.data;

        this.$alert('保存成功！', '提示', {
          confirmButtonText: '确定',
          type: 'primary'
        }).then(() => {
          this.$emit('product')
        }).catch(() => {
        });

      });
    },
    pre() {
      this.$emit('pre')
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.colImg {
  border-right: 1px solid #ddd;
  height: 410px;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.el-form-item__label) {
  /* color: #ddd; */
  font-size: 18px;
}
.inp {
  width: 88%;
}
.inp1 {
  width: 100%;
}

.deploy-btn {
  position: fixed;
  text-align: right;
  bottom: 30px;
  right: 28%;
  /* background-color: #EEE; */
}
.deploy-btn1 {
  position: fixed;
  text-align: right;
  bottom: 40px;
  right: 45%;
  /* background-color: #EEE; */
}
.formDiv {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  /* background: rgba(13, 68, 98, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;  */
  margin: 0 20px;
  padding: 20px 0;
  /* //   transform: translateY(-20px); */
}
img {
  width: 150px;
}
</style>